import React from 'react';
import {RouteComponentProps} from "react-router"
import {Icon, NavBar} from "antd-mobile";
import DishForm from "./component/dish-form";
import "./css/style.less";
import history from "../../util/router/history";
import {inject, observer} from "mobx-react";
import {UploadDishStore} from "./store";
import DataLoading from "../../util-biz/loading-data";
import ErrorPage from "../../util-biz/error";

interface IUploadDishProps extends RouteComponentProps{
  uploadDishStore?: UploadDishStore | any;
}

@inject('uploadDishStore')
@observer
export default class UploadDish extends React.Component<IUploadDishProps, any> {

  constructor(props: IUploadDishProps) {
    super(props);
    let dishId = null;
    if (this.props.location.state) {
      // 编辑场景,传入dishId
      dishId = this.props.location.state.dishId;
    }

    if (dishId) {
      this.props.uploadDishStore.initEditDishInfo(dishId).then();
    } else {
      this.props.uploadDishStore.clearDishInfo();
    }
  }

  render() {
    let dishId = null;
    if (this.props.location.state) {
      // 编辑场景
      dishId = this.props.location.state.dishId;
      const {dishName, dishStatus} = this.props.uploadDishStore;
      if (dishId !== null && dishName === null) {
        if (dishStatus === 1) {
          return <DataLoading />;
        } else {
          return <ErrorPage tips="菜品不存在或出错啦..."/>;
        }
      }
    }

    return (
      <div className="my-content-box margin-bottom-10">
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={history.goBack}
        >
          {dishId === null ? "新增": "编辑"}菜品
        </NavBar>

        <DishForm />
      </div>
    );
  }
}
